<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>jTopo Demo</title>
	<meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
	<meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">

	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">

	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>

	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	<script type="text/javascript" src="js/toolbar.js"></script>

	<script id='code'>
		$(document).ready(function(){
			var canvas = document.getElementById('canvas');
			var stage = new JTopo.Stage(canvas);

			showJTopoToobar(stage);
			var scene = new JTopo.Scene(stage);
			scene.backgroundColor = '21,21,21';
			scene.alpha = 1;

            function link(a, z){
                var link = new JTopo.Link(a, z);
                link.strokeColor = '255,255,255';
                link.lineWidth = 1;
				link.alpha = 0.6;
                scene.add(link);
            }

            function addNode(x, y, text){
                var node = new JTopo.CircleNode();
                node.fillColor = '255,255,255';
                node.text = text;
                node.radius = 2;
				node.alpha = 0.8;
                node.setCenterLocation(x, y);
                scene.add(node);
                return node;
            }

			var count = 0;
			var pre;
            var first;
			var t = new Logo.Tortoise();
            t.paint = function(x, y){
                var node = addNode(x, y);
                if(pre == null){
                    first = node;
                    pre = node;
                }else{
                    link(pre, node);
                    pre = node;
                }
            };

			t.moveTo(canvas.width/2, canvas.height/2);

            function p(){
                t.forward(1);
            }

			function triangle(){
				Logo.polygon(3)(t);
			}

            function rect(){
                Logo.polygon(4)(t);
            }

            function star(){
                Logo.star(5)(t);
            }

            function circle(){
               Logo.polygon(20)(t);
            }

            t.resize(40);
            t.moveTo(100, canvas.height/2 - 200);
            function f()  { Logo.scale(rect, 1, 1)(t); }
            function f1() { Logo.spin(triangle, 3)(t); }
            function f2() { Logo.shift(f1, 1)(t); };
            function f3() { Logo.spin(f2, 3)(t); };
            function f4() { Logo.spiral(f2, 15, 0.2, 0.8)(t); }
            f4();
		});


	</script>
  </head>

  <body>
	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>
		<div class="head_nav_second">
			<ul class="menu" id="nav_menu">

			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">

			</ul>
		  </div>
		  <div class="right">
				<div id="content">
					<canvas width="850" height="550" id="canvas"></canvas>

				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>

</body>

</html>
